<template>
    <div id="outStorageMake">
      <h1>出库单</h1>
      <el-form :model="outbound" >
        <div style="text-align: right">
          <el-button type="success" @click="MakeBtn" plain>提交</el-button>
          <el-button plain @click="showAddDialog">返回</el-button>
        </div>
        <br><br>


      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="goodsId" label="编号" width="160">
        </el-table-column>
        <el-table-column
            prop="imgLink"
            label="商品图片">
          <template slot-scope="scope">
            <el-avatar :size="45" shape="square" :src="scope.row.imgLink" @error="errorHandler">
              <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
            </el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称">
        </el-table-column>
        <el-table-column prop="amount" label="数量">
        </el-table-column>
        <el-table-column prop="price" label="单价">
        </el-table-column>
        <el-table-column prop="subtotal" label="小计">
        </el-table-column>
        <el-table-column prop="warehouseName" label="出库仓库">
        </el-table-column>
      </el-table>

      <div class="div1">
        <el-row :gutter="20">
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="登记人:" label-width="">
              <el-input v-model="outbound.register"   ></el-input>
            </el-form-item>
          </div></el-col>

        </el-row>
        <el-row :gutter="20" >
          <el-col :span="6" :offset="1"><div class="grid-content bg-purple">
            <el-form-item label="出库理由:" label-width="">
              <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="outbound.reason"
                  maxlength="50"
                  show-word-limit
                  style="width: 1000px"
              >
              </el-input>
            </el-form-item>
          </div></el-col>
        </el-row>
      </div>
      </el-form>
    </div>
</template>

<script>
export default {
  name: "OutStorageMake",
  data() {
    return {


      //商户Id
      merchantId: [],


      //商户id和订单创建时间
      MidAndOrderCreateTime: {},

      //订单明细
      tableData:[],

      //出库单对象
      outbound: {},
    }
  },
  methods: {

    //生成出库单
    async MakeBtn() {
      const outboundAndDetailsDto = {
        outbound: this.outbound,
        outboundDetailList: this.tableData
      };
      const { data: res } = await this.$http.post('/outbound/outboundMake',outboundAndDetailsDto);
      this.$message.success(res);
      this.$router.push("/allotGoods");
    },
    //返回
    showAddDialog() {
      this.$router.push("/allotGoods");
    },
    //根据商户Id和订单创建时间 查询订单和订单明细
    async queryOrderDetailsByMid() {
      const { data: res} = await this.$http.post(`/orderDetails/queryOrderDetailsByMid`,this.MidAndOrderCreateTime);
       this.tableData = res;
    },
    //图片展示失败
    errorHandler() {
      return true
    },
  },
  created() {

    //商户id
    this.MidAndOrderCreateTime.merchantId = this.$route.query.id;
    //订单创建时间
    this.MidAndOrderCreateTime.orderCreateTime = this.$route.query.orderCreateTime;


    this.queryOrderDetailsByMid();

  }
}
</script>

<style scoped>

</style>